<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../layui/layui.js" type="text/javascript"></script>
		<link href="../layui/css/layui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="layui-container" style="margin: 10px 0px; ">
			<form class="layui-form layui-form-pane">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">父菜单</label>
						<div class="layui-input-inline" style="width: 225px;">
							<input type="radio" name="checkPid" lay-filter="checkPid" value="0" title="顶层菜单" checked/>
							<input type="radio" name="checkPid" lay-filter="checkPid" value="1" title="子菜单" />
						</div>	
						<div class="layui-input-inline">
							<input type="hidden" name="pid" id="parentId"  />
							<input type="hidden" id="pid" />
						</div>	
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">菜单名称</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="name" />
					</div>	
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单图标</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="icon" />
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单类型</label>
						<div class="layui-input-inline">
							<input type="radio" name="type" value="menu" title="菜单" checked/>
							<input type="radio" name="type" value="btn" title="功能" />
						</div>	
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜单url</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="url" />
					</div>	
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单标识</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="remark" />
						</div>	
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">菜单顺序</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input" name="sort" lay-verify="number"/>
						</div>	
					</div>
				</div>
				<div class="layui-form-item" style="display: none;">
					<div class="layui-input-block">
						<a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
					</div>	
				</div>
			</form>
		</div>
		<script>
			
			var $;
			layui.config({
				base:'../js/'
			})
			layui.use(['form','jquery','treeSelect'],function(){
				var form = layui.form,treeSelect = layui.treeSelect;
				$ = layui.jquery;
				
				
				form.on('radio(checkPid)',function(data){
					var value = data.value;
					if(value==0){
						$('#parentId').val(0);
						$('.layui-treeSelect').css('display','none');
					}else{
						$('.layui-treeSelect').css('display','block');
					}
				})
			
				//菜单下拉树
				treeSelect.render({
					elem:'#pid',
					placeholder:"选择子菜单的父菜单",
					search:true,
					data:'../data/treeSelect.json',
					type:'get',
					success:function(data){
						$('.layui-treeSelect').css('width','375px');
						$('.layui-treeSelect').css('display','none');
					},
					click:function(data){
						var current = data.current;
						var pid = current.id;
						$('#parentId').val(pid);
					}
				})
			
			
			});
		</script>
	</body>
</html>
